<!-- components/ContentCard.vue -->
<template>
	<view class="content-card" @click="goToDetail(item.homeId)">
		<image :src="item.coverImage" class="card-image" mode="aspectFill" />
		<view class="card-tags">
			<u-tag v-for="(tag, i) in item.tags" :key="i" :text="'#' + tag" type="info" shape="circle" size="mini"
				bg-color="#F9F9F9" color="#666666" border-color="#FFFFFF" />
		</view>
		<view class="card-content">
			<u--text :lines="2" :text="item.contentText" size="12px"></u--text>
		</view>
		<view class="card-meta">
			<text>@{{ item.nickName }}</text>

			<view>
				<u--text prefixIcon="eye" :text="item.readCount" size="22rpx" :iconStyle="{ marginRight: '5rpx',fontSize:'28rpx',marginBottom:'-1rpx' }"></u--text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				required: true,
			},
		},
		methods: {
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/homestay/detail?id=${id}`,
				});
			},
		},
	};
</script>

<style>
	.content-card {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		padding-bottom: 12rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.card-image {
		width: 100%;
		height: 180rpx;
		object-fit: cover;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}

	.card-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		padding: 8px;
	}

	.card-content {
		margin: 0 10px;
	}

	.card-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8rpx 12rpx 0 12rpx;
		font-size: 22rpx;
		color: #888;
	}
</style>